import React from 'react';
import Header from '../components/header';
import Player from '../container/player';
import MusicList from '../container/musicList';
import Pubsub from 'pubsub-js';
import {BrowserRouter as Router, Route} from 'react-router-dom';

import { connect } from 'react-redux'
import { togglePlay, changeProgress, changeVolume, leftTime, prevMusic, nextMusic } from '../action/actions'

// let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  // 播放音乐
  playMusic(musicItem) {
      $('#player').jPlayer('setMedia', {
        mp3: musicItem.file
      })
  }

  // 判断 播放上一曲 或 下一曲
  playPrevOrNext(type = 'prev'){
      let index = this.findMusicIndex(this.props.musicItem);
      //let newIndex = null;
      //let length = this.state.musiclist.length;
      if(type==='next') {
          // 触发 action:nextMusic(index)
          this.props.dispatch(nextMusic(index));
          //this.playMusic(this.props.musicItem);
          //newIndex = (index+1) % length;
      } else {
        // 触发 action:prevMusic(index)
        this.props.dispatch(prevMusic(index));
        //this.playMusic(this.props.musicItem);
        //newIndex = (index-1+length) % length;
      }
  }

  // 获取音乐数组索引
  findMusicIndex(musicItem){
      return  this.props.musicList.indexOf(musicItem);
  }
  // 组件加载完执行...
  componentDidMount() {
    $('#player').jPlayer({
      supplied: 'mp3',
      wmode: 'window'
    });
    // 播放音乐
    this.playMusic(this.props.musicItem);

    // 订阅 上一曲
    Pubsub.subscribe('PREV_MUSIC' , (msg) =>{
        this.playPrevOrNext('prev');
    })

    // 订阅 下一曲
    Pubsub.subscribe('NEXT_MUSIC' , (msg) =>{
        this.playPrevOrNext('next');
    });

    // 订阅 点击播放 或 暂停
    Pubsub.subscribe('IS_PLAY', (msg) => {
      let isPlay = this.props.baseInfo.isPlay;
      $('#player').jPlayer(isPlay ? 'pause' : 'play');
      this.props.dispatch(togglePlay(isPlay ? 0 : 1));
    });
  }
  
  componentWillUnMount(){
      Pubsub.unsubscribe('PREV_MUSIC');
      Pubsub.unsubscribe('NEXT_MUSIC');
      Pubsub.unsubscribe('IS_PLAY');
      //$('#player').unbind($.jPlayer.event.ended)
    }

  render() {
    // 注入 connect 被调用
    // baseInfo 存放 progress volume isPlay leftTime 的初始值
    const { dispatch, baseInfo, musicItem, musicList } = this.props;

    const Home = () => {
      return(
        <Player
          changeProgress={prog => dispatch(changeProgress(prog))}
          changeVolume={vu => dispatch(changeVolume(vu))}
          leftTime={time => dispatch(leftTime(time))}
          // togglePlay={bool => dispatch(togglePlay(type))}
          // prevMusic={index => dispatch(prevMusic(index))}
          // nextMusic={index => dispatch(nextMusic(index))}
          baseInfo={baseInfo}
          musicItem={musicItem}
        />
      )
    };
    const List = () => {
      return(
        <MusicList
          musicItem={musicItem}
          musicList={musicList}
        />
      )
    };

    return (
      <Router>
        <div>
          <Header/>
          <Route exact path="/" component={Home}/>
          <Route path="/list" component={List}/>
        </div>
      </Router>
    )
  }
}

// 选择要注入的值，传递给全局state
function select(state) {
  return {
    baseInfo: {
      // 进度
      progress: state.progress,
      // 音量
      volume: state.volume,
      // 是否播放
      isPlay: state.isPlay,
      // 剩余时间
      leftTime: state.leftTime
    },
    // 播放音乐
    musicItem: state.musicItem,
    // 所有音乐列表
    musicList: state.musicList
  }
}

// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
export default connect(select)(App)
